<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>


    <div id="root">
        <ul>
            <li v-for="p in persons" :key="p.id">
               {{p.name}}-{{p.age}}
            </li>

            <!-- <li v-for="(p,index) of persons"> -->
            <li v-for="(p,index) in persons">
                <!-- {{p.name}}-{{p.age}} -->
                 {{p.name}}  {{index}}
             </li>


             <li v-for="(a,b) in car">
                {{a}}-{{b}}
             </li>

             <li v-for="(a,b) in str" :key="b">
                {{a}}-{{b}}
             </li>

             <li v-for="(a,b) in 5" >
                {{a}}-{{b}}
             </li>

        
        </ul>
       
       
    </div>


</body>

<script>
    new Vue({
        el: "#root",
        data: {
            persons:[
                {id:"001",name:"张三",age:18},
                {id:"002",name:"李四",age:20},
                {id:"003",name:"王五",age:20},           
            ],
            car:{
                brand:"奔驰",price:100000,
            },
            str:"hello world"
        }
    })
</script>

</html>